<button 
[cdkContextMenuTriggerFor]="taskbar_menu_menu"
mat-icon-button 
class="example-icon" 
aria-label="Example icon-button with menu icon" 
(click)="triggerMenu(); $event.stopPropagation()" 
 
#trigger 
>
    <mat-icon >menu</mat-icon>
</button> 
 
<!-- This template displays the overlay content and is connected to the button -->
<ng-template  
  #panelTemplate 
 > 
<div class="pannel" (click)="$event.stopPropagation()" (contextmenu)="$event.preventDefault()" >
<!-- 用户区 --> 
<div class="user-area" (contextmenu)="$event.preventDefault()">
  <span class="spacer"></span>
  <img [matMenuTriggerFor]="menu" src="images/person.png" height="50px" />
  <div [matMenuTriggerFor]="menu">{{userName}}</div> 
</div>
<mat-menu #menu="matMenu">
  <button class="taskbar-menu-pannel" mat-menu-item (click)="logout()" >注销</button> 
</mat-menu>

<!-- 文件列表区 -->
<div class="list-area" [cdkContextMenuTriggerFor]="taskbar_menu_files" (cdkContextMenuOpened)="contextMenuOpened($event)"  >
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding [matTreeNodePaddingIndent]="16" >
    <app-taskbar-menu-item-cmp [data]="node.item" (onRemove)="removeItem(node.item)" ></app-taskbar-menu-item-cmp>
    </mat-tree-node>
    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding [matTreeNodePaddingIndent]="16"  (expandedChange)="expandedChange(node)" >
      <app-taskbar-menu-item-cmp [data]="node.item"  (onRemove)="removeItem(node.item)" (onCreateFolder)="createFolder(node)" (onCreateFile)="createFile($event,node)"  [attr.aria-label]="'Toggle ' + node.item" matTreeNodeToggle></app-taskbar-menu-item-cmp>
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
      @if (node.isLoading) {
        <mat-progress-bar mode="indeterminate" class="example-tree-progress-bar"></mat-progress-bar>
      }
    </mat-tree-node>
  </mat-tree>
</div>
 </div>
</ng-template>

<ng-template #taskbar_menu_menu>
  <div class="menu taskbar-menu-pannel" cdkMenu>
    <button class="menu-item" cdkMenuItem (click)="logout()">注销</button>
  </div>
</ng-template>

<ng-template #taskbar_menu_files>
  <div class="menu taskbar-menu-pannel" cdkMenu> 
    <button class="menu-item"  cdkMenuItem (click)="createFolder()" >新建文件夹</button>
    <button class="menu-item"  cdkMenuItem [cdkMenuTriggerFor]="new_doc">新建文件
                <span>
                        <svg viewBox="0 0 5 10" focusable="false" aria-hidden="true" class="mat-mdc-menu-submenu-icon"><polygon points="0,0 5,5 0,10"></polygon></svg>
                </span>
    </button>  
    <button class="menu-item"  cdkMenuItem  *ngIf="isCanPasteFlag" (click)="paste()"  >粘贴</button>     
    <button class="menu-item"  cdkMenuItem (click)="load()"  >刷新</button>     
    <button class="menu-item"  cdkMenuItem  *ngFor="let item of ext_operations" (click)="ext_operation_execute(item)" >{{item.name}}</button>
  </div>
</ng-template>

<ng-template #new_doc>
  <div class="menu taskbar-menu-pannel" cdkMenu>
    <button class="menu-item"  cdkMenuItem  *ngFor="let item of createFile_templates" (click)="createFile(item)" >{{item.name}}</button> 
  </div>
</ng-template>
